<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <%- include("link"); %> 
    <style>
        body{
          list-style: none;
          margin: 0;
          padding: 0;
        }
       .setcolor{
              background-color:  #F89032;
            }
        #protrait{
          border-radius: 50%;
          background-color: turquoise;
          display: inline-block;
          margin-right: 25px;
        }   
        
        #main{
          width: 90%;
          margin: auto;
          margin-top:108px;
          flex-wrap: nowrap;
          display: flex;

        }
        .left{
          width: 70%;


        }
        .right{
          width:30%;
          padding-left: 20px;
        }
        .person{
          height: 100px;
          display: flex;
        }
        #main .protrait{
          width:100px;
          height: 100px;
          border-radius: 50%;
          background-color: teal;
        }
        #main .UserInfo{
          flex-grow: 1;
          margin-left: 10px;
        }
        .UserInfo .name{
          height: 50%;
          padding-top: 5px;
          font-weight: bold;
          font-size: x-large;
          

        }
        .UserInfo .count{
          height: 50%;
        }
        .UserInfo .count ul{
          display: flex;
          margin: 0;
          padding: 0;
          list-style: none;
    
        }
        .UserInfo .count ul li{
         margin-right: 12px;
    
        }
        #main .navigation2{
          margin-top: 30px;
        }

        .card{
          width: 100%;
          margin-top: 20px;
        }

        .list-group{
          margin-top: 20px;
        }
        .collections li{
          border: solid rgba(0,0,0, 0.125);
          border-width: 0 0 1px 0;
          font-size: smaller;
        }
        
    </style>
  </head>
  <body>
      <nav class="navbar navbar-expand-md navbar-dark fixed-top setcolor ">
        <a class="navbar-brand" href="#">导航</a>
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item ">
              <a class="nav-link" href="/homepage">我的主页<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/login">关注</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="/reg">随便逛逛</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">更多</a>
              <div class="dropdown-menu" aria-labelledby="dropdown01">
                <a class="dropdown-item" href="#">我的收藏</a>
                <a class="dropdown-item" href="#">我的喜欢</a>
                <a class="dropdown-item" href="/">登出</a>
              </div>
            </li> 
          </ul>
          <!--头像-->
          <div id="protrait">
              <a href="">头像</a></div>

          <button type="button " class="btn btn-light" style="margin-right: 30px;width: 150px;">写文章</button>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>

    <!--发表博客内容-->
    <div id="main" >
      <div class="left">
        <div class="person">
          <div class="protrait">
            <img src="" alt="">
          </div>
          <div class="UserInfo">
            <div class="name">鹦鹦怪</div>
            <div class="count">
              <ul>
                <li>关注:<span>1</span></li>
                <li>粉丝:<span>1</span></li>
                <li>文章:<span>1</span></li>
                <li>喜欢:<span>1</span></li>
                <li>被收藏:<span>1</span></li>
              </ul>
            </div>
          </div>
        </div>
        <!--文章导航-->
        <div class="navigation2">
          <ul class="nav nav-tabs">
            <li class="nav-item">
              <a class="nav-link active" href="#">文章</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="#">关注</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">喜欢</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">收藏</a>
            </li>
          </ul>
        </div>

        <!--文章-->
        <div class="article">
          <div class="card" >
            <div class="card-body">
              <h6 class="card-title"><a href="">文章标题</a> </h6>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <div class="action">
                <a href="#" class="card-link" style="font-size: x-small;font-weight: bold;">已读：<span></span></a>
                <a href="#" class="card-link" style="font-size: x-small; font-weight: bold;">评论：<span></span></a>
                <a href="#" class="card-link" style="font-size: x-small;font-weight: bold;" >点赞：<span></span></a>
                <div class="time">2020-6-22</div>
              </div>
            </div>
          </div>

          <div class="card" >
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <div class="action">
                <a href="#" class="card-link">已读：<span></span></a>
                <a href="#" class="card-link">评论：<span></span></a>
                <a href="#" class="card-link">点赞：<span></span></a>
                <div class="time">2020-6-22</div>
              </div>
            </div>
          </div>

          <div class="card" >
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <div class="action">
                <a href="#" class="card-link">已读：<span></span></a>
                <a href="#" class="card-link">评论：<span></span></a>
                <a href="#" class="card-link">点赞：<span></span></a>
                <div class="time">发表时间</div>
              </div>
            </div>
          </div>
        </div>
      </div>    
      <div class="right">
        
        <div class="collections">
          <h4 class="posts-feed " style="font-size: 1.2rem;">
            我的文集
          </h4>
         <hr />
          <ul class="list-group ">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <a href="">文集3</a> 
              <span class="badge badge-primary badge-pill">14</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <a href="">文集3</a> 
              <span class="badge badge-primary badge-pill">2</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
               <a href="">文集3</a> 
              <span class="badge badge-primary badge-pill">1</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <a href="">创建文集</a>
            </li>
          </ul>
        </div>
      </div>




    </div>




      <%-include("scripts"); %>
    </body>
    </html>

    

   